<template>
  <div class="title2">
    {{ data.totalUser }}
  </div>
  <div class="container">
    <div class="itemtop">
      <el-icon color="green" size="25"><CaretBottom /></el-icon>
    </div>

    <div class="item">
      <div class="inner1"></div>
      <div class="inner2"></div>
    </div>
    <div class="itembottom">
      <el-icon color="green" size="25"><CaretTop /></el-icon>
    </div>
  </div>
  <div class="footer">
    日同比&nbsp;&nbsp;{{ data.userGrowLastDay }}%&nbsp;&nbsp;&nbsp;<el-icon
      color="green"
      ><CaretTop
    /></el-icon>
    &nbsp;月同比&nbsp;&nbsp;{{ data.userGrowLastMonth }}%&nbsp;
    &nbsp;<el-icon color="green"><CaretTop /></el-icon>
  </div>
</template>

<script setup>
// import {  onMounted } from 'vue';
import { CaretTop, CaretBottom } from '@element-plus/icons-vue';
import { useDataStore } from '@/stores/dataStore'
import { storeToRefs } from 'pinia'

const store = useDataStore()
const { data } = storeToRefs(store)
// onMounted(() => {
//   store.getTopData()
// })
</script>

<style scoped>
.container {
  height: 80px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  margin-top: 10px;
  position: relative;
}
.title2 {
  font-size: 25px;
  font-weight: 600;
  margin-top: 10px;
}
.footer {
  font-size: 14px;
}
.item {
  width: 100%;
  height: 15px;
  position: relative;
  top: 20px;
  display: flex;
}
.inner1 {
  flex: 80%;
  background-color: green;
}
.inner1:hover {
  opacity: 0.8;
}
.inner2 {
  flex: 20%;
  background-color: #d4d2d2;
}
.inner2:hover {
  opacity: 0.2;
}
.itemtop {
  position: absolute;
  left: 75%;
  top: -5px;
}
.itembottom {
  position: absolute;
  left: 75%;
  top: 35px;
}
</style>
